
<!-- ============================================================== -->
<!-- Start Page Content -->
<!-- ============================================================== -->
<div class="row ">
<div class="card col-xs-4 col-md-5 mb-2 table-responsive text">
  <div class="card-body">
    <h4>Striped Full Width Table</h4>
    <table class="table">

      <thead class="black white-text">
        <tr>
          <th scope="col"># Task</th>
          <th scope="col">Progress</th>
          <th scope="col">Label</th>
        </tr>
      </thead>

      <tbody>
        <tr>
          <td>1. Update software</td>
          <td class="progress">
              <div class="progress-bar bg-danger" style="width: 55%; height:5px;" role="progressbar">  </div>
          </td>
          <td>
              <button type="button" class="btn btn-danger">55%</button>
          </td>
        </tr>

        <tr>
          <td>2. Clean database</td>
          <td class="progress">
            <div class="progress-bar bg-warning" style="width: 70%; height:5px;" role="progressbar">  </div>
          </td>
          <td>
            <button type="button" class="btn btn-warning">70%</button>
          </td>
        </tr>
        <tr>
          <td>3. Cron job running</td>
          <td class="progress">
            <div class="progress-bar bg-info progress-bar-striped" style="width: 30%; height:5px;" role="progressbar">  </div>
          </td>
          <td>
            <button type="button" class="btn btn-primary">30%</button>
          </td>
        </tr>
        <tr>
          <td>4. Fix and squish bugs</td>
          <td class="progress">
            <div class="progress-bar bg-success" style="width: 90%; height:5px;" role="progressbar">  </div>
          </td>
          <td>
            <button type="button" class="btn btn-success">90%</button>
          </td>
        </tr>
      </tbody>
    </table>
  </div>
</div>


<!-- ============================================================== -->
<!-- Start Page Content -->
<!-- ============================================================== -->
<div class="card col-xs-4 col-md-5 mb-2 table-responsive text">
  <div class="card-body">

    <h4>Striped Full Width Table</h4>
    <ul class="pagination justify-content-end">
      <li class="page-item"><a class="page-link" href="javascript:void(0);"> << </a></li>
      <li class="page-item"><a class="page-link" href="javascript:void(0);">1</a></li>
      <li class="page-item"><a class="page-link" href="javascript:void(0);">2</a></li>
      <li class="page-item"><a class="page-link" href="javascript:void(0);">3</a></li>
      <li class="page-item"><a class="page-link" href="javascript:void(0);"> >> </a></li>
    </ul>

    <table class="table">

      <thead class="black white-text">
        <tr>
          <th scope="col"># Task</th>
          <th scope="col">Progress</th>
          <th scope="col">Label</th>
        </tr>
      </thead>

      <tbody>
        <tr>
          <td>1. Update software</td>
          <td class="progress">
              <div class="progress-bar bg-danger" style="width: 55%; height:5px;" role="progressbar">  </div>
          </td>
          <td>
              <button type="button" class="btn btn-danger">55%</button>
          </td>
        </tr>

        <tr>
          <td>2. Clean database</td>
          <td class="progress">
            <div class="progress-bar bg-warning" style="width: 70%; height:5px;" role="progressbar">  </div>
          </td>
          <td>
            <button type="button" class="btn btn-warning">70%</button>
          </td>
        </tr>
        <tr>
          <td>3. Cron job running</td>
          <td class="progress">
            <div class="progress-bar bg-info progress-bar-striped" style="width: 30%; height:5px;" role="progressbar">  </div>
          </td>
          <td>
            <button type="button" class="btn btn-primary">30%</button>
          </td>
        </tr>
        <tr>
          <td>4. Fix and squish bugs</td>
          <td class="progress">
            <div class="progress-bar bg-success" style="width: 90%; height:5px;" role="progressbar">  </div>
          </td>
          <td>
            <button type="button" class="btn btn-success">90%</button>
          </td>
        </tr>
      </tbody>
    </table>
  </div>
</div>
<!-- ============================================================== -->
<!-- RESPONSIVE HOVER TABLE-->
<!-- ============================================================== -->

<div class="card col-xs-4 col-md-9 mb-2 table-responsive text">
  <div class="card-body">
    <h4>Responsive Hover Table</h4>

  <!-- Grid row -->
<div class="row float-right display" >
  <!-- Grid column -->
  <div class="col-md-6 mb-4 mt-2 btn-group">
    <button type="button" class="btn btn-default px-3"><i class="fas fa-sync-alt" aria-hidden="true"></i></button>
    <button type="button" class="btn btn-default px-3" (click)="toggleDisplay()"><i class="fas fa-expand-alt" aria-hidden="true"></i></button>
  </div>
</div>

    <table class="table" id="servers" *ngIf ="!isDisplay" style="background-color: white; height: 100px; width: 200px; ">

      <thead class="black blue-text">
        <tr>
          <th scope="col" *ngFor = "let server of servers">Worker Host {{server.Hostname}}</th>
        </tr>
      </thead>

      <tbody>
        <tr *ngFor = "let server of servers">
          <td *ngFor = "let server of servers">
            <div>
              <td><i class="fas fa-square"> CPU:</i></td>
              <td>
                <div class="progress">
                  <div class="progress-bar bar1" aria-valuemin="0" aria-valuemax="100" style=" width:100%; height:20px" role="progressbar">{{server.Resources.CPUs}}</div>
                </div>
                <a class="float-right">{{server.Cpuuse}} core(s) in use</a>
              </td>

            </div>

            <div>
              <td><i class="fas fa-square"> RAM:</i></td>
              <td>
                <div class="progress ">
                  <div class="progress-bar bar2" style="width:100%; height:20px;" role="progressbar">{{server.Resources.MemPhysical}}</div>
                </div>
              </td>
            </div>


            <div>
              <td><i class="fas fa-square"> VMEM:</i></td>
              <td>
                <div class="progress ">
                  <div class="progress-bar bar3" style="width:100%; height:20px;" role="progressbar">{{server.Resources.MemSwap}}</div>
                </div>
              </td>
            </div>


            <div>
              <td><i class="fas fa-square"> GPU:</i></td>
              <td>
                <div class="progress " >
                  <div class="progress-bar bar4" style="width:100%; height:20px;" role="progressbar">{{server.Resources.GPUs}}</div>
                </div>
              </td>
            </div>

        </tr>
      </tbody>
    </table>
</div>






